import React, { Component } from 'react';
import { Form, Select, Modal, message } from 'antd';
import store from '../../../redux/index';
import axios from 'axios';
const FormItem = Form.Item;
const Option = Select.Option;

class RelationForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      children: [],
      id: '',
    };
  }
  componentWillReceiveProps(nextProps) {
    if (store.getState().getGroup.GroupMembers.length !== 0) {
      if (this.state.id === nextProps.ID) {
        return false;
      } else {
        this.state.id = nextProps.ID;
        this.getSelectData();
      }
    }
  }
  getSelectData = () => {
    store.getState().getGroup.GroupMembers.forEach(item => {
      if (item.name !== undefined) {
        this.state.children.push(<Option key={item.name} id={item.id}>{item.name}</Option>);
      }
    });
  }
  fetchUser = (value) => {
    const _this = this;
    const Token = sessionStorage.getItem('token');
    axios({
      method: 'get',
      url: '/api/admin/user/page?name=' + value,
      headers: {
        Authorization: Token
      },
    })
      .then(function (response) {
        if (response.data.code === 200) {
          let oData = [];
          response.data.data.rows.forEach(item => {
            _this.state.children = [];
            oData.push(<Option key={item.name + item.id} id={item.id}>{item.name}</Option>);
          });
          _this.setState({
            children: oData
          });
        }
        // _this.openNotification('success',"成功","修改成功");
      })
      .catch(function (error) {
        console.log(error);
        message.error('服务器开小差啦，请重试！');
      });
  }
  handleChange = (value, data) => {
    let oData = [];
    data.forEach(item => {
      oData.push(item.props);
    });
    store.dispatch({ type: 'ChangeLeaders', GroupLeaders: oData });
    store.dispatch({ type: 'ChangeMembers', GroupMembers: oData });
  }
  Blur = () => {
    this.state.children = [];
  }
  render() {
    const { visible, onCancel, onSave } = this.props;
    const { getFieldDecorator } = this.props.form;
    return (
      <Modal
        visible={visible}
        title="创建"
        okText="确定"
        cancelText="取消"
        onCancel={onCancel}
        onOk={onSave}
      >
        <Form>
          <FormItem
            label="组员"
            labelCol={{ span: 5 }}
            wrapperCol={{ span: 16 }}
          >
            {getFieldDecorator('select', {
              initialValue: store.getState().getGroup.GroupMembersUser,
              rules: [{ required: true, message: '请输入组员!', }]
            })(
              <Select
                mode="multiple"
                size="default"
                placeholder="请输入组员"
                options={this.state.children}
                onChange={this.handleChange}
                onSearch={this.fetchUser}
                onBlur={this.Blur}
                style={{ width: '100%' }}
              >
                {this.state.children}
              </Select>
            )}
          </FormItem>
        </Form>
      </Modal>
    );
  }

}
const Relation = Form.create()(RelationForm);
export default Relation;